<template>
    <div class="add-menu">
        <!-- 添加菜单 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加菜单</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-tag type="danger" effect="dark" style="font-size:16px;margin-left:10%">上级菜单和跳转路径均不选择时表示添加一级菜单</el-tag>
        <el-tag type="danger" effect="dark" style="font-size:16px">上级菜单和跳转路径均选择时表示添加二级菜单</el-tag>
        <el-form :inline="true" :model="menuForm" :rules="menuRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="menuForm.menuName" class="menu-input"></el-input>
            </el-form-item>
            <el-form-item label="菜单编码" prop="menuCode">
                <el-input v-model="menuForm.menuCode"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" prop="menuIcon">
                <el-input v-model="menuForm.menuIcon"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单" prop="parentMenuId">
                <el-select v-model="parentMenu" placeholder="请选择上级菜单" style="width:186%" @change="selectMenu()">
                    <el-option label="" value=""></el-option>
                    <el-option v-for="(item,index) in parentMenus" :label="item.menuName" :value="item.menuId + ',' + item.menuCode" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-select v-model="menuForm.menuType" placeholder="请选择菜单类型" style="width:186%">
                    <el-option label="菜单" value="1"></el-option>
                    <el-option label="权限" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="跳转路径" prop="skipPath">
                <el-input v-model="menuForm.skipPath"></el-input>
            </el-form-item>
            <!-- <el-form-item label="菜单顺序" prop="menuSort">
                <el-input v-model="menuForm.menuSort"></el-input>
            </el-form-item> -->
        </el-form>
        <el-button type="success" style="margin-left:35px" @click="addMenu('ruleForm')">点击添加</el-button>
        <el-button type="warning" @click="ResetMenu('ruleForm')">点击重置</el-button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            menuForm:{
                menuId:-1,
                menuName:'',
                menuCode:'',
                menuIcon:'',
                parentCode:'',
                parentMenuId:'',
                menuType:'',
                skipPath:'',
            },
            parentMenu:"",
            parentMenus:[],
            menuName:'',
            menuRules:{
                menuName:[
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                // skipPath:[
                //     { required: true, message: '请输入菜单跳转路径', trigger: 'blur' }
                // ]
            }

        }
    },
    created(){
        this.getParentMenus();
    },
    methods:{
        //获取父级菜单
        getParentMenus(){
            this.$http.get("/menuInfo/getAllParentMenus?menuName="+this.menuName).then((res)=>{
                if(res.code === 200){
                    this.parentMenus = res.data;
                }
            })
        },
        selectMenu(){
            if(this.parentMenu != null && this.parentMenu != ''){
                let menuArr = this.parentMenu.split(",");
                this.menuForm.parentMenuId = menuArr[0];
                this.menuForm.parentCode = menuArr[1];
                // console.log("我的:"+this.menuForm);
            }else{
                this.menuForm.parentMenuId = "";
                this.menuForm.parentCode = "";
                // console.log("我的1:"+this.menuForm);
            }
            // this.$message.success("successs");
        },
        //添加
        addMenu(ruleForm){
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    // console.log(this.menuForm);
                    this.$http.post("/menuInfo/addMenuOne",this.menuForm).then((res)=>{
                        if(res.data){
                            this.menuForm={};
                            this.parentMenu="";
                            this.$message.success("添加成功,请刷新页面");
                        }else{
                            if(res.msg != null){
                                this.$message.error(res.msg);
                            }else{
                                this.$message.error("添加失败,请联系管理员!!!");
                            }
                        }
                    }).catch((err)=>{
                        this.$message.error("添加失败,请联系管理员!!!");
                    });
                } else {
                    console.log('error submit!!');
                    this.$message.error("请输入必填项!!!");
                    return false;
                }
            });
        },
        // 重置
        ResetMenu(ruleForm){
            this.$refs[ruleForm].resetFields();
            this.parentMenu = "";
        }
    }

}
</script>

<style scoped>
.add-menu .demo-ruleForm{
    width: 100%;
    margin-top: 20px;
}
.add-menu .demo-ruleForm .el-form-item{
    width: 45%;
}
.add-menu .demo-ruleForm .el-form-item .el-input{
    width: 200%;
;}

</style>